import React, { Component } from 'react'
/**
 *  验证码组件
 *  a.验证码本质的展示形式是图片 img标签的src属性引入[url,base64]  需要在服务端返回并生成
 *    图片处理后的结果存储起来 缓存中
 *  b.客户端展示图片
 *  c.用户根据图片展示的内容进行处理,并通过表单输入提交到服务端
 *  d.验证码通过,进行执行下步操作,进行用户信息的校验
 *    验证码不通过，提示用户验证码错误并刷新验证码
 *
 *  注意:
 *    使用中可能需要多个验证码,在服务器端进行校验时,需要通过一个唯一标识,来确认校验哪个,key唯一值
 *   细节:
 *    1、验证码的点击刷新
 *    2、当同时生成使用多个验证码时,将生成的验证码匹配对应一个唯一值key
 *    3、key唯一值存储的位置 存储在上级,在验证码组件内部存储,生成之后就被覆盖了
 *    4、验证码图片尺寸调整
 *    5、当组件被销毁时,取消请求
 *
 *
 *   父组件一定要下传方法 是验证码子组件可以传递key给父组件存储
 */
import axios from 'axios'
import Pts from 'prop-types'
export default class Captcha extends Component {
  state = {
    src: ''
  }
  // 默认参数
  static defaultProps = {
    h: 36,
    w: 120
  }
  // 限制必传参数
  static propTypes = {
    // 传递saveKey 类型为方法  必须传递
    saveKey: Pts.func.isRequired
  }
  componentDidMount() {
    // 发送请求获取验证码相关信息
    this.load()
  }
  // axios 取消请求 需要先生成一个资源  每一个请求的标识
  source = axios.CancelToken.source()
  // 获取验证码并修改组件状态
  load = () => {
    axios
      .get('https://reactapi.iynn.cn/captcha/api/math', {
        cancelToken: this.source.token
      })
      .then((res) => {
        // console.log(res)
        // sst操作是异步的,确认图片地址存储后,在将key传给父组件
        this.setState({ src: res.data.img }, () => {
          this.props.saveKey(res.data.key)
        })
      })
  }
  render() {
    return (
      <div>
        <img
          src={this.state.src}
          width={this.props.w}
          height={this.props.h}
          onClick={this.load}
          alt="验证码"
          title="验证码"
          style={{cursor:'pointer'}}
        />
      </div>
    )
  }
  // componentWillUnmount() {
  //   // 取消请求
  //   this.source.Cancel()
  // }
}
